import './App.css';
import { useState } from "react"
import { Route, NavLink, useHistory, Switch } from "react-router-dom"
import Fetch from "./components/Fetch"
import Empty from "./components/Empty"

function App() {
  const history = useHistory()
  const [ keyword, setKeyword ] = useState('')
  const handleSearchClick = () => {
    history.push(`/${keyword}`)
  }
  return (
    <>
      <header className="w-4/5 h-1/5 mx-auto border-b">
        <div className="flex justify-center items-center h-24">
          <input
            type="text"
            placeholder="输入想要搜索的关键词"
            className="w-4/5 h-10 p-4 outline-none border rounded-sm text-sm"
            value={keyword}
            onChange = { e => setKeyword(e.target.value) }
          />
          <button className="ml-4 border p-2" onClick={handleSearchClick}>检索</button>
        </div>
        <div className="flex justify-center">
          <NavLink to="/wind" activeClassName="bg-black text-white" className="text-black block mx-4 border border-gray-600 rounded-sm py-2 px-6">风</NavLink>
          <NavLink to="/fire" activeClassName="bg-black text-white" className="text-black block mx-4 border border-gray-600 rounded-sm py-2 px-6">火</NavLink>
          <NavLink to="/forest" activeClassName="bg-black text-white" className="text-black block mx-4 border border-gray-600 rounded-sm py-2 px-6">林</NavLink>
          <NavLink to="/mountain" activeClassName="bg-black text-white" className="text-black block mx-4 border border-gray-600 rounded-sm py-2 px-6">山</NavLink>
        </div>
      </header>
      <div className="h-4/5">
        <Switch>
          <Route path="/:keyword" component={Fetch}></Route>
          <Route render={() => <Empty />}></Route>
        </Switch>
      </div>
    </>
  );
}

export default App;
